<template>
    <div>
        <div class="out-style">
            <div>
                <Row :gutter="16" class="alert">
                    <Col span="8">
                        <Alert>
                            <template slot="desc">
                                <div class="content-div">
                                    <div class="first">满减券</div>
                                    <div class="second">
                                        <p>例：满100元减20元</p>
                                        <p>便于合理控制活动成本</p>
                                    </div>
                                    <div class="btn">
                                        <Button type="primary" @click="addCoupon">立即新建</Button>
                                    </div>
                                </div>
                            </template>
                        </Alert>
                    </Col>
                    <Col span="8">
                        <Alert>
                            <template slot="desc">
                                <div class="content-div">
                                    <div class="first">折扣券</div>
                                    <div class="second">
                                        <p>例：满100元减20元</p>
                                        <p>便于合理控制活动成本</p>
                                    </div>
                                    <div class="btn">
                                        <Button type="primary">立即新建</Button>
                                    </div>
                                </div>
                            </template>
                        </Alert>
                    </Col>
                    <Col span="8">
                        <Alert>
                            <template slot="desc">
                                <div class="content-div">
                                    <div class="first">随机金额券</div>
                                    <div class="second">
                                        <p>例：满100元减20元</p>
                                        <p>便于合理控制活动成本</p>
                                    </div>
                                    <div class="btn">
                                        <Button type="primary">立即新建</Button>
                                    </div>
                                </div>
                            </template>
                        </Alert>
                    </Col>
                </Row>
            </div>
            <div class="search-form">
                <Alert>
                    <Form :model="searchObj" class="form">
                        <FormItem label="优惠券名称:">
                            <Input v-model="searchObj.name" clearable placeholder="请输入优惠券名称"/>
                        </FormItem>
                        <FormItem label="优惠券状态:">
                            <Select v-model="searchObj.status" placeholder="请选择优惠券状态" clearable filterable>
                                <Option value="beijing">满减券</Option>
                                <Option value="shanghai">折扣券</Option>
                                <Option value="shenzhen">随机券</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="优惠券类型:">
                            <Select v-model="searchObj.type" placeholder="请选择优惠券类型" clearable filterable>
                                <Option value="beijing">正常</Option>
                                <Option value="shanghai">失效</Option>
                                <Option value="shenzhen">草稿</Option>
                            </Select>
                        </FormItem>
                    </Form>
                    <div class="bottom-style">
                        <Button type="primary" size="small">筛选</Button>
                        <Button type="primary" size="small">导出</Button>
                        <span>查看已导出报表</span>
                        <span>重置筛选条件</span>
                    </div>
                </Alert>
                <Table :columns="couponColumns" :data="couponData" :loading="tableLoading">
                    <template slot-scope="{ row }" slot="type">
                        <div v-if="row.type =='FULLREDUCE'">满减券</div>
                    </template>
                    <template slot-scope="{ row }" slot="status">
                        <div v-if="row.status =='NORMAL'">正常</div>
                        <div v-if="row.status =='INVALID'">失效</div>
                        <div v-if="row.status =='DRAFT'">草稿</div>
                    </template>
                    <template slot="operation" slot-scope="{ row }">
                        <Button type="primary" size="small" class="action-btn" @click="editBtn(row)">编辑</Button>
                        <Button type="info" size="small" class="action-btn" @click="infoBtn(row)">详情</Button>
                        <Button type="error" size="small" class="action-btn" @click="delBtn(row.id)">删除</Button>
                    </template>
                </Table>
            </div>
        </div>
    </div>
</template>

<script>
import { marketingCouponServiceFind, marketingCouponServiceDelete } from '@/api/shop'

export default {
  data () {
    return {
      tableLoading: false,
      searchObj: {},
      couponColumns: [
        {
          title: '优惠券名称',
          key: 'name',
          width: 130,
          align: 'center'
        },
        {
          title: '名称备注',
          key: 'remarks',
          width: 120,
          align: 'center'
        },
        {
          title: '库存数',
          key: 'stock',
          width: 120,
          align: 'center'
        },
        {
          title: '类型',
          slot: 'type',
          width: 100,
          align: 'center'
        },
        {
          title: '适用店铺',
          key: 'name',
          width: 120,
          align: 'center'
        },
        {
          title: '优惠内容',
          key: 'amount',
          width: 120,
          align: 'center'
        },
        {
          title: '状态',
          slot: 'status',
          width: 100,
          align: 'center'
        },
        {
          title: '已领取/剩余',
          key: '',
          width: 120,
          align: 'center'
        },
        {
          title: '已使用',
          key: '',
          width: 120,
          align: 'center'
        },
        {
          title: '支付金额(元)',
          key: '',
          width: 120,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'operation',
          fixed: 'right',
          width: 200,
          align: 'center'
        }
      ],
      couponData: []
    }
  },
  methods: {
    init () {
      this.tableLoading = true
      let param = {
        brand_id: '6178b98ca42a4190a4b784a739acef5f'
      }
      marketingCouponServiceFind(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.couponData = ret.data.data
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    editBtn () {
    },
    infoBtn () {
    },
    deleteOne (val) {
      marketingCouponServiceDelete({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.init()
          this.success('删除成功')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    delBtn (val) {
      this.$Modal.confirm({
        title: '确认删除么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteOne(val)
        }
      })
    },
    addCoupon () {
      this.$router.push({
        name: 'shopCouponCreateIndex'
      })
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '添加成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped lang="less">
    .action-btn{
        margin-left: 10px;
    }
    .out-style {
        .alert /deep/ .ivu-alert-info {
            border: none;
            background-color: #F1F7FF;
            min-height: 150px;
        }

        .alert /deep/ .ivu-col-span-8 {
            width: 20%;
        }
    }

    .content-div {
        text-align: center;

        .first {
            font-size: 14px;
            font-weight: 500;
            line-height: 2.5em;
        }

        .second {
            font-size: 12px;
            line-height: 1.5em;
        }

        .btn /deep/ .ivu-btn {
            font-size: 12px;
        }

        .btn {
            font-size: 12px;
            line-height: 4.5em;
        }
    }

    .search-form /deep/ .ivu-alert-info {
        border: none;
        background-color: #F7F8FA;
    }

    /deep/ .ivu-form-item {
        margin-top: 10px;
    }

    .search-form {
        .form {
            display: inline-flex;
        }
    }

    .form /deep/ .ivu-form-item {
        display: flex;
        margin-right: 15px;
    }

    .bottom-style {
        margin-left: 78px;
        margin-bottom: 10px;

        span {
            font-size: 13px;
            color: #155BD4;
            margin-left: 15px;
        }
    }

    .bottom-style /deep/ .ivu-btn {
        font-size: 13px;
        width: 6%;
        margin-left: 10px;
        vertical-align: baseline;
    }
</style>
